<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>contact</title>
    <!-- Favicon 网站图标-->
    <link href="img/favicon.ico" rel="shortcut icon" />
    <!-- 引入WOW动画库 -->
    <link rel="stylesheet" href="./css/animate.min.css" />

    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- swiper -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />

    <!-- 引入图标文件 twitter facebook等 -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />

    <!-- 引入less文件此处必须添加 /less  ！！！ -->
    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="./css/reset.less" />

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./css/common.less" />
    <link rel="stylesheet/less" href="./css/index.less" />
  </head>
  <body>
    <!-- Page Preloder 加载界面-->
    <div id="preloder">
      <div class="loader"></div>
    </div>

    <!-- Header 头部 -->
    <header>
      <!-- 导航栏 -->
      <nav class="navbar navbar-expand-lg">
        <a class="site-logo" href="index.html"><img src="./img/logo.png" alt="" /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="./Index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./games.html">games</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./reviews.html">reviews</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">News</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact.html">contact</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <!-- Header end -->

    <!-- page top section -->
    <section class="page-top-section page-top-section3">
      <div class="header-social d-flex justify-content-end">
        <p>Follow us:</p>
        <a href="#"><i class="fa fa-pinterest"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-dribbble"></i></a>
        <a href="#"><i class="fa fa-behance"></i></a>
      </div>
      <div class="page-info">
        <h2>Contact</h2>
        <div class="site-breadcrumb">
          <a href="">Home</a> /
          <span>Contact</span>
        </div>
      </div>
    </section>
    <!-- page top section end-->

    <!-- Contact page -->
    <section class="contact-page">
      <div class="container">
        <!-- 百度地图 -->
        <div class="map"><iframe src="./baidumap.html" style="border: 0" allowfullscreen></iframe></div>
        <!-- 高德地图 -->
        <!-- <div class="map"><iframe class="map" src="https://m.amap.com/picker/?key=8f5ab7996900d3da3dcb98d3f32daa7a" allowfullscreen="" loading="lazy"></iframe></div> -->
        <div class="row">
          <div class="col-lg-7">
            <div class="contact-form">
              <input type="text" placeholder="Your name" />
              <input type="text" placeholder="Your e-mail" />
              <input type="text" placeholder="Subject" />
              <textarea placeholder="message"></textarea>
              <button class="site-btn">Send message<img src="img/icons/double-arrow.png" alt="#" /></button>
            </div>
          </div>
          <div class="col-lg-5 contact-text">
            <h3>Howdy! Say hello</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
              suspendisse ultrices gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.....
            </p>
            <div class="cont-info">
              <div class="ci-icon"><img src="img/icons/location.png" alt="" /></div>
              <div class="ci-text">Main Str, no 23, New York</div>
            </div>
            <div class="cont-info">
              <div class="ci-icon"><img src="img/icons/phone.png" alt="" /></div>
              <div class="ci-text">+546 990221 123</div>
            </div>
            <div class="cont-info">
              <div class="ci-icon"><img src="img/icons/mail.png" alt="" /></div>
              <div class="ci-text">hosting@contact.com</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact page end -->
    <!-- Newsletter section -->
    <section class="newsletter-section">
      <div class="container">
        <h2>Subscribe to our newsletter</h2>
        <form class="newsletter-form">
          <input type="text" placeholder="ENTER YOUR E-MAIL" />
          <button class="site-btn">subscribe <img src="img/icons/double-arrow.png" alt="#" /></button>
        </form>
      </div>
    </section>
    <!-- Newsletter section end -->

    <!-- Footer section -->
    <section class="footer-section">
      <div class="container">
        <div class="footer-left-pic">
          <img src="img/footer-left-pic.png" alt="" />
        </div>
        <div class="footer-right-pic">
          <img src="img/footer-right-pic.png" alt="" />
        </div>
        <a href="#" class="footer-logo">
          <img src="./img/logo.png" alt="" />
        </a>
        <ul class="footer-menu">
          <li><a href="">Home</a></li>
          <li><a href="">Games</a></li>
          <li><a href="">Reviews</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Contact</a></li>
        </ul>
        <div class="footer-social d-flex justify-content-center">
          <a href="#"><i class="fa fa-pinterest"></i></a>
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-dribbble"></i></a>
          <a href="#"><i class="fa fa-behance"></i></a>
        </div>
        <div class="copyright"><a href="">Colorlib</a> 2018 @ All rights reserved</div>
      </div>
    </section>
    <!-- Footer section end -->
  </body>
</html>
<!-- 引入jq -->
<script src="./js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap.js -->
<script src="./js/bootstrap.min.js"></script>

<!-- swiper -->
<script src="./js/swiper-bundle.min.js"></script>

<!-- 引入wow -->
<script src="./js/wow.min.repeat.js"></script>

<!-- 引入less -->
<script src="./js/less-4.1.3.js"></script>

<!-- 引入主要js -->
<script src="./js/main.js"></script>
